{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% extends "firefox/base/base-protocol.html" %}

{% from "macros-protocol.html" import split, card, callout with context %}
{% from "macros.html" import google_play_button, apple_app_store_button with context %}

{% block page_title %}Firefox - Gemacht mit Blick auf deine Sicherheit{% endblock %}
{% block page_desc %}Keine Kompromisse, bei den Dingen, die dir wichtig sind: Sicherheit, Produktivität und die Freiheit, so zu sein, wie du willst – mit Firefox.{% endblock %}
{% block page_image %}{{ static('img/firefox/built-for-you/meta-de.jpg') }}{% endblock %}

{% block site_css %}
  {% if ftl_file_is_active('navigation_refresh') and ftl_file_is_active('footer-refresh') %}
    {{ css_bundle('m24-root') }}
    {{ css_bundle('m24-navigation-and-footer') }}
  {% else %}
    {{ css_bundle('legacy-navigation-and-footer') }}
  {% endif %}
  {{ css_bundle('protocol-firefox') }}
{% endblock %}

{% block page_css %}
  {{ css_bundle('protocol-split') }}
  {{ css_bundle('protocol-card') }}
  {{ css_bundle('protocol-callout') }}
  {{ css_bundle('firefox-built-for-you') }}
{% endblock %}

{% set android_url = 'https://play.google.com/store/apps/details?id=org.mozilla.firefox&listing=built-for-you-de&referrer=utm_source%3Dwww.mozilla.org%26utm_medium%3Dreferral%26utm_campaign%3Dbuilt-for-you' %}
{% set ios_url = 'https://apps.apple.com/app/firefox-private-safe-browser/id989804926?ppid=721e328c-8a9e-4a2f-9785-febc1563f4e1&pt=373246&ct=built-for-you&mt=8' %}

{% if variation == "1" %}
  {% set media_include = 'firefox/built-for-you/includes/v1-pinocchio-de.html' %}
{% elif variation == "2" %}
  {% set media_include = 'firefox/built-for-you/includes/v2-superhero-de.html' %}
{% elif variation == "3" %}
  {% set media_include = 'firefox/built-for-you/includes/v3-sloth.html' %}
{% elif variation == "4" %}
  {% set media_include = 'firefox/built-for-you/includes/v4-alien.html' %}
{% else %}
  {% set media_include = 'firefox/built-for-you/includes/v5-human.html' %}
{% endif %}

{% block content %}
<main class="built-for-you">
  {% call split(
    media_include=media_include,
    media_after=True,
    block_class='c-hero mzp-l-split-center-on-sm-md',
  ) %}
    <div class="mzp-c-wordmark mzp-t-wordmark-md mzp-t-product-firefox mzp-l-wordmark-center-on-sm-md">Firefox</div>
    <h1 class="mzp-u-title-lg">Gemacht mit Blick auf deine Sicherheit</h1>
    <p class="c-hero-tagline">Keine Kompromisse, bei den Dingen, die dir wichtig sind: Sicherheit, Produktivität und die Freiheit, so zu sein, wie du willst – mit Firefox.</p>
    <div class="cta-is-firefox">
      <a id="set-as-default-button" href="{{ url('firefox.set-as-default.thanks') }}" class="mzp-c-button" data-cta-text="Mach Firefox zu deinem Standardbrowser" data-cta-position="page-hero">
        Mach Firefox zu deinem Standardbrowser
      </a>
    </div>
    <div class="cta-not-firefox">
      <div class="is-android">
        {{ google_play_button(href=android_url, id='play-store-link') }}
      </div>
      <div class="is-ios">
        {{ apple_app_store_button(href=ios_url, id='app-store-link') }}
      </div>
      {{ download_firefox_thanks(download_location='page-hero', locale_in_transition=True) }}
    </div>
  {% endcall %}

  <section class="section-safety">
    <div class="mzp-l-content mzp-t-content-lg">
      <h2 class="mzp-c-section-heading">Dank Firefox ist deine Privatsphäre online geschützt.</h2>

      <div class="mzp-l-columns mzp-t-columns-two">
        <div class="c-highlight">
          {{ resp_img(
            url="img/firefox/built-for-you/privacy.png",
            srcset={
              "img/firefox/built-for-you/privacy-high-res.png": "2x"
            },
            optional_attributes={
              "loading": "lazy",
              "class": "c-highlight-image",
              "width": "480",
              "height": "270",
              "alt": ""
            }
          ) }}
          <div class="c-highlight-content">
            <h3>Beweg dich frei durchs Web – ohne Tracker von Drittanbietern, die dir von Seite zu Seite folgen.</h3>
          </div>
        </div>

        <div class="c-highlight">
          {{ resp_img(
            url="img/firefox/built-for-you/trackers.png",
            srcset={
              "img/firefox/built-for-you/trackers-high-res.png": "2x"
            },
            optional_attributes={
              "loading": "lazy",
              "class": "c-highlight-image",
              "width": "480",
              "height": "270",
              "alt": ""
            }
          ) }}
          <div class="c-highlight-content">
            <h3>Die Privatsphäre-Einstellungen von Firefox sind automatisch auf einem sicheren Level.</h3>
          </div>
        </div>
      </div>

    </div>
  </section>

  <section class="section-features">
    <div class="mzp-l-content mzp-t-content-md">
      <div class="c-section-intro">
        <h2 class="mzp-c-section-heading">Wähle einen Browser, auf den du zählen kannst.</h2>
        <p>Die Features von Firefox können deine Produktivität steigern und sind auf deine Bedürfnisse zugeschnitten.</p>
      </div>

      <ul class="mzp-l-columns mzp-t-columns-two">
        <li class="c-feature">
          <h3 class="c-feature-title">
            <img src="{{ static('img/firefox/built-for-you/icon-sync.svg') }}" width="48" height="48" class="c-feature-icon" alt="">
            Sync
          </h3>
          <p class="c-feature-desc">Hab stets Zugriff auf Lesezeichen, Passwörter und offene Tabs über mehrere Geräte hinweg.</p>
        </li>
        <li class="c-feature">
          <h3 class="c-feature-title">
            <img src="{{ static('img/firefox/built-for-you/icon-picture-in-picture.svg') }}" width="48" height="48" class="c-feature-icon" alt="">
            Bild-im-Bild
          </h3>
          <p class="c-feature-desc">Starte, pausiere oder spule Videos vor – alles in einem Bild-im-Bild-Fenster während du browst.</p>
        </li>
        <li class="c-feature">
          <h3 class="c-feature-title">
            <img src="{{ static('img/firefox/built-for-you/icon-translation.svg') }}" width="48" height="48" class="c-feature-icon" alt="">
            Translations
          </h3>
          <p class="c-feature-desc">Übersetze das Web direkt in deinem Browser und halte deine Übersetzungen privat.</p>
        </li>
        <li class="c-feature">
          <h3 class="c-feature-title">
            <img src="{{ static('img/firefox/built-for-you/icon-pdf-editor.svg') }}" width="48" height="48" class="c-feature-icon" alt="">
            PDF-Editor
          </h3>
          <p class="c-feature-desc">Fülle Lücken, markiere wichtige Stellen oder unterschreibe Dokumente ohne zusätzliche Software.</p>
        </li>
      </ul>

    </div>
  </section>

  {% call split(
    image=resp_img("img/firefox/built-for-you/speed.jpg",
      srcset={
        "img/firefox/built-for-you/speed-high-res.jpg": "2x"
      },
      optional_attributes={
        "loading": "lazy",
        "class": "mzp-c-split-media-asset",
        "width": "480",
        "height": "270",
        "alt": ""
      },
    ),
    block_class='section-speed mzp-l-split-reversed mzp-t-content-lg mzp-l-split-center-on-sm-md',
  ) %}
    <h2 class="mzp-u-title-md">Rase durchs Web</h2>
    <p>Dank Firefox vergisst du, was Lag bedeutet. Unser Browser war nie schneller und lädt jetzt YouTube-Videos schneller als jemals zuvor.</p>
    <div class="cta-is-firefox">
      <a id="set-as-default-button" href="{{ url('firefox.set-as-default.thanks') }}" class="mzp-c-button" data-cta-text="Mach Firefox zu deinem Standardbrowser" data-cta-position="speed-section">
        Mach Firefox zu deinem Standardbrowser
      </a>
    </div>
    <div class="cta-not-firefox">
      <div class="is-android">
        {{ google_play_button(href=android_url, id='play-store-link') }}
      </div>
      <div class="is-ios">
        {{ apple_app_store_button(href=ios_url, id='app-store-link') }}
      </div>
      {{ download_firefox_thanks(download_location='speed-section', locale_in_transition=True) }}
    </div>
  {% endcall %}

  <section class="mzp-c-callout section-choose">
    <div class="mzp-l-content mzp-t-content-sm">
      <div class="mzp-c-callout-content">
        <img class="mzp-c-callout-media" src="{{ static('img/firefox/built-for-you/choose.svg') }}" width="184" height="116" alt="">
        <h2 class="mzp-c-callout-title mzp-u-title-md">Wähle einen Browser, der für dich gemacht ist</h2>
        <div class="cta-is-firefox">
          <a id="set-as-default-button" href="{{ url('firefox.set-as-default.thanks') }}" class="mzp-c-button" data-cta-text="Mach Firefox zu deinem Standardbrowser" data-cta-position="page-footer">
            Mach Firefox zu deinem Standardbrowser
          </a>
        </div>
        <div class="cta-not-firefox">
          <div class="is-android">
            {{ google_play_button(href=android_url, id='play-store-link') }}
          </div>
          <div class="is-ios">
            {{ apple_app_store_button(href=ios_url, id='app-store-link') }}
          </div>
          {{ download_firefox_thanks(alt_copy='Wähl Firefox', download_location='page-footer', locale_in_transition=True) }}
        </div>
      </div>
    </div>
  </section>
</main>
{% endblock %}
